<template>
  <div class="choose-box">
    <el-dialog width="60%" top="3%" title="选择商品" v-model="dialogFormVisible" :draggable="true" @close="dialogClose">
      <div class="content-box">
        <div class="search-box">
          <div>
            <span>商品名称：</span>
            <el-input v-model="searchForm.goodsName" clearable placeholder="请输入商品名称" @keypress.enter="searchHandle" />
          </div>
          <div>
            <span>商品编码：</span>
            <el-input v-model="searchForm.goodsCode" clearable placeholder="请输入商品编码" @keypress.enter="searchHandle" />
          </div>
        </div>
        <div style="margin-top:10px;" class="search-box">
          <div>
            <span>运营商：</span>
            <el-select v-model="searchForm.operator" filterable placeholder="请选择运营商" clearable @change="searchHandle">
              <el-option v-for="item in yysOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div>
            <span>商品渠道：</span>
            <el-select disabled v-model="incomForm.shopId" filterable placeholder="请选择供应商" clearable @change="searchHandle">
              <el-option v-for="item in qdOptions" :key="item.shopId" :label="item.shopName" :value="item.shopId" />
            </el-select>
          </div>
        </div>
        <div class="table-box">
          <el-table :height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
            :cell-style="{fontSize:'14px',color:'#7b7b7d'}" :data="tableData" stripe>
            <el-table-column type="index" width="55" align="center" />
            <el-table-column label="" align="center" width="50">
              <template v-slot="scope">
                <el-radio class="radio" v-model="templateSelection" :label="scope.$index"
                  @change="(e) => { radioChange(e,scope.row) }">{{ '' }}</el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="商品名称">
              <template v-slot="scope">
                {{ scope.row.goodsName || '' }}
              </template>
            </el-table-column>
            <el-table-column prop="goodsCode" label="商品编码" align="center">
              <template v-slot="scope">
                {{ scope.row.goodsCode || '' }}
              </template>
            </el-table-column>
            <el-table-column prop="operator" label="运营商" align="center">
              <template v-slot="scope">
                {{ scope.row.operator || '' }}
              </template>
            </el-table-column>
            <el-table-column label="归属省市" align="center">
              <template v-slot="scope">
                {{ scope.row.provinceAreaName + scope.row.cityAreaName }}
              </template>
            </el-table-column>
            <el-table-column prop="price" label="面值(元)" align="center">
              <template v-slot="scope">
                {{ numFormat(scope.row.price/100) || '' }}
              </template>
            </el-table-column>
            <el-table-column prop="packageInfo" label="套餐" align="center">
              <template v-slot="scope">
                {{ scope.row.packageInfo || '' }}
              </template>
            </el-table-column>
            <el-table-column prop="supplierShopName" label="商品渠道" align="center">
              <template v-slot="scope">
                {{ scope.row.supplierShopName || '' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitHandle">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import api from './api'
import { getWindowWidthAndHeight, warningDeal, numFormat } from '@/utils/utils'
export default {
  setup(props, context) {
    const state = reactive({
      tableHeight: 0,
      page: 1,
      size: 10000,
      total: 0,
      dialogFormVisible: false,
      searchForm: {},
      yysOptions: [],
      tableData: [],
      chooseGoods: {},
      templateSelection: null,
      incomForm: {},
      qdOptions: [],
    })

    function getGysOption() {
      const obj = {
        page: 1,
        size: 10000,
      }
      api.relationMySupplier(obj).then(res => {
        if (res.code == '200') {
          state.qdOptions = res.data.records
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function dialogShow(data) {
      state.incomForm = data
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 440
      state.dialogFormVisible = true
      searchHandle()
      getYysOptions()
      getGysOption()
    }

    function dialogClose() {
      state.chooseGoods = {}
      state.searchForm = {}
      state.templateSelection = null
    }

    function searchHandle() {
      state.page = 1
      getTableData()
    }

    function getTableData() {
      const obj = {
        page: state.page,
        size: state.size,
        ...state.searchForm,
      }
      api.goodsMySupplierSearch(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.records
          state.total = res.data.total
          if (state.incomForm.goodsId) {
            state.tableData.map(item => {
              if (item.goodsId == state.incomForm.goodsId) {
                radioChange(true, item)
              }
            })
          }
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getYysOptions() {
      api.operatorList().then(res => {
        if (res.code == '200') {
          state.yysOptions = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function radioChange(e, data) {
      state.chooseGoods = data
      state.templateSelection = state.tableData.indexOf(data)
    }

    function submitHandle() {
      context.emit('chooseGoods', state.chooseGoods)
      state.dialogFormVisible = false
    }

    return {
      ...toRefs(state),
      dialogClose,
      dialogShow,
      searchHandle,
      numFormat,
      radioChange,
      submitHandle,
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 14px;
  > div {
    display: flex;
    align-items: center;
    > span {
      flex-shrink: 0;
    }
  }
}
.table-box {
  margin-top: 20px;
  .table-footer {
    margin-top: 20px;
    display: flex;
    align-items: center;
  }
}
</style>